<!-- 语言选择 -->
<template>
	<view class="my-content">
		<view class="u-page">
		</view>
		<view class="my-form">
			<view class="foot">
				<p class="my-font-text" style="width: 100%;font-size: 34rpx;">语言选择(Выбор языка)</p>
				<view class="language" :class="{ active: show }" @click="active(1)">
					简体中文
				</view>
				<view class="language Russian" :class="{ active: !show }" @click="active(2)">
					Русский язык
				</view> 
			</view>
			<view class="button">
				<u-button type="primary" :custom-style="customStyle" hover-class="none" @click="link">
					{{ btnText[activeIndex] }}
				</u-button>
			</view>
		</view>

		<view>
			<u-popup v-model="showPopup2" :width="'100%'">
				<view class="xy-popup">
					<view @click="guanbi">⬅</view>
					<view class="xy-popup-title">{{ $t('隐私政策') }}</view>
					<u-parse :html="xyContent2.content"></u-parse>
					<button @click="guanbi" style="margin-top: 50rpx;width: 80%;">
						{{$t('关闭')}}
					</button>
				</view>
			</u-popup>
		</view>

		<view class="zhezhao" v-if="zhezhao&&agreeApp==false"></view>
		<view class="yinsi" v-if="zhezhao&&agreeApp==false">
			<view class="xy-popup-title" style="margin-top: 30px;font-size: 32rpx;">{{ $t('隐私政策') }}</view>
			<view style="font-size: 28rpx;line-height: 32px;padding: 30rpx;">
				<text class="checkbox-1">
					{{$t('本应用尊重并保护所有用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本应用会按照隐私政策的规定使用和披露您的个人信息。可阅读')}}
				</text>
				<text class="checkbox-2" @click.stop="link2"
					style="color: #000;font-weight:bold">《{{ $t('GLUZ用户账号服务协议') }}》</text>
				<text class="checkbox-1">{{$t('和')}}</text>
				<text class="checkbox-2" @click.stop="showXy2"
					style="color: #000;font-weight:bold">《{{ $t('隐私政策') }}》</text>
			</view>

			<view class="btn-group-2">
				<view class="btn_" @click="confirm1()">{{$t('知晓并同意')}}</view>
				<view v-if="plat!='mp-weixin'" class="btn_ btn_2" @click="noconfirm1()" style="margin-top: 25rpx;">
					{{$t('不同意并退出APP')}}
				</view>
				<navigator class="btn_ btn_2" v-if="plat=='mp-weixin'" open-type="exit" target="miniProgram">
					{{$t('不同意并退出APP')}}
				</navigator>
			
				
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				agreeApp: false, //是否同意协议
				show: true,
				customStyle: {
					padding: '20rpx',
					minWidth: '300rpx',
					height: '78rpx',
					background: '#3D3D3D',
					'border-radius': '26rpx',
				},
				lang: 'zh',
				btnText: {
					1: '立即使用',
					2: 'Начать'
				},
				activeIndex: 1,
				page: '',

				showPopup2: false,
				xyContent2: '',
				zhezhao: true,
				plat: 'app'
			}
		},
		onLoad(opt) {
			uni.setStorageSync('activityNum', 0);
			var that = this
			this.agreeApp = uni.getStorageSync("agreeApp")

			this.$u.api.basic.getContentData({
				type: "是否弹出隐私政策",
				nowLang: this.nowLang
			}).then(res => {
				if (res) {
					if (res.content == 1) {
						that.zhezhao = true
					} else {
						that.zhezhao = false
					}
				} else {
					that.zhezhao = true
				}
			})

			uni.getSystemInfo({
				success: function(res) {
					console.log(res)
					if (res.uniPlatform === 'app') {
						that.plat = 'app'
					} else if (res.uniPlatform === 'web') {
						that.plat = 'web'
					} else if (res.uniPlatform === 'mp-weixin') {
						that.plat = 'mp-weixin'
					}
					uni.setStorage({
						key: 'plat',
						data: that.plat
					})
				}
			})
		},
		computed: {},
		methods: {
			active(e) {
				this.activeIndex = e
				if (e === 1) {
					this.lang = 'zh'
					this.show = true
				} else {
					this.lang = 'ru'
					this.show = false
				}
			},
			link2() {
				this.$u.route({
					url: '/pages/user/privacy/privacy',
					params: {
						type: 'GLUZ用户账号服务协议'
					}
				})
			},
			showXy2() {
				this.$u.api.basic.getContentData({
					type: "隐私政策",
					nowLang: this.nowLang
				}).then(res => {
					this.xyContent2 = res
				})
				this.showPopup2 = true
			},
			guanbi() {
				this.showPopup = false
				this.showPopup2 = false
			},
			confirm1() {
				this.zhezhao = false
				getApp().globalData.agreeApp = true
				//同意后不再显示
				uni.setStorageSync("agreeApp", 1);
			},
			noconfirm1() {
				this.zhezhao = false
				// #ifdef APP-PLUS
				plus.runtime.quit();
				return true //return true的意思是禁止返回到上一个界面
				// #endif
			},
			link() {
				uni.setStorage({
					key: 'lang',
					data: this.lang
				})

				getApp().globalData.lang = this.lang
				this.$i18n.locale = this.lang
				this.$u.route({
					url: '/pages/tabbar/startPage/startPage',
					type: 'reLaunch'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-page {
		width: 100%;
		height: 100%;
		background: url("/static/images/start/language.png");
		background-size: 500rpx auto;
		background-repeat: no-repeat;
		background-position: center 50rpx;
	}

	.my-form {
		padding: 158rpx 61rpx 0 59rpx;
		position: absolute;
		top: 401rpx;
		height: calc(100% - 401rpx);
		width: 100%;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 52rpx 52rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
	}

	.language {
		width: 100%;
		height: 133rpx;
		border-radius: 9rpx;
		border: 2rpx solid #000000;
		font-size: 42rpx;
		font-weight: 400;
		color: #000;
		line-height: 58rpx;
		text-align: center;
		line-height: 133rpx;
	}

	.Russian {
		margin-top: 36rpx;
	}

	.button {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		font-size: 35rpx;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 49rpx;
		letter-spacing: 1px;
		padding-bottom: 80rpx;
	}

	.active {
		background: #3D3D3D;
		border-radius: 9rpx;
		border: 3rpx solid;
		color: #FFFFFF;
	}

	.xy-popup {
		margin-top: 20px;
		margin-bottom: 80px;
		width: 100%;
		padding: 20rpx 20rpx 60rpx 20rpx;
	}

	.xy-popup-title {
		color: #333;
		text-align: center;
		font-weight: bold;
	}

	.zhezhao {
		background-color: #000000;
		opacity: 0.6;
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		z-index: 99;
	}

	.yinsi {
		background-color: #ffffff;
		width: 90%;
		left: 5%;
		border-radius: 20rpx;
		position: fixed;
		top: 15%;
		z-index: 100;
	}

	.btn_ {
		background: #3D3D3D;
		padding-top: 10px;
		padding-bottom: 10px;
		color: #fff;
		border-radius: 3px;
		width: 100%;
		line-height: 24px;
		margin: 0 auto;
		margin-top: 15rpx;
		border: 1rpx solid transparent;
		font-size: 30rpx;
	}

	.btn_2 {
		background: #fff;
		border: 1rpx solid #3D3D3D;
		color: #3D3D3D;
	}

	.btn-group-2 {
		width: 80%;
		margin: 0 auto;
		text-align: center;
		margin-top: 15rpx;
		padding-bottom: 30rpx;
	}
</style>